@import url(http://fonts.googleapis.com/css?family=Expletus+Sans);

progress:not(value) {
    /* Add your styles here. As part of this walkthrough we will focus only on determinate progress bars. */
}

/* Styling the determinate progress element */

progress[value] {
    /* Get rid of the default appearance */
    appearance: none;
    float: left;
    border: none;

    /* Add dimensions */
    width: 60%; 
    height: 80%;
    background-color: whiteSmoke;
    border-radius: 3px;
    box-shadow: 0 2px 3px rgba(0,0,0,.5) inset;
    color: DarkMagenta;
    position: relative;
    margin: 3% 25px 1.5em;  

    border: medium none;
}
progress[value]::-webkit-progress-bar {
    background-color: red;
    border-radius: 3px;
    box-shadow: 0 2px 3px rgba(0,0,0,.5) inset;
}

progress[value]::-webkit-progress-value {
    position: relative;


    background-size: 35px 20px, 100% 100%, 100% 100%;
    border-radius:3px;

    /* Let's animate this */
    animation: animate-stripes 5s linear infinite;
}

@keyframes animate-stripes { 100% { background-position: -100px 0; } }

progress[value]::-webkit-progress-value:after {
    /* Only webkit/blink browsers understand pseudo elements on pseudo classes. A rare phenomenon! */
    content: '';
    position: absolute;

    width:5px; height:5px;
    top:7px; right:7px;

    background-color: white;
    border-radius: 100%;
}

/* Firefox provides a single pseudo class to style the progress element value and not for container. -moz-progress-bar */

progress[value]::-moz-progress-bar {
    /* Gradient background with Stripes */
    background-image:
        -moz-linear-gradient( 135deg,
        transparent,
        transparent 33%,
        rgba(0,0,0,.1) 33%,
        rgba(0,0,0,.1) 66%,
        transparent 66%),
        -moz-linear-gradient( top,
        rgba(255, 255, 255, .25),
        rgba(0,0,0,.2)),
        -moz-linear-gradient( left, #09c, #f44);

    background-size: 35px 20px, 100% 100%, 100% 100%;
    border-radius:3px;

    /* Firefox doesn't support CSS3 keyframe animations on progress element. Hence, we did not include animate-stripes in this code block */
}

/* Fallback technique styles */
.progress-bar { 
    background-color: whiteSmoke;
    border-radius: 3px;
    box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.5) inset;
    width: 100%;
    margin-left: 1%!important;
    height: 90%;
    position: relative!important;
    float: left!important;
}

.span-bar 
{
    position: relative;
    margin-top: 20px;
    margin-left: 10px;

    border-radius: 3px;
    float: left;
    /*    margin-right: 21%;
        margin-top: 0.7%;*/
}

p[data-value] { 

    position: relative; 
}

/* The percentage will automatically fall in place as soon as we make the width fluid. Now making widths fluid. */

p[data-value]:after {
    content: attr(data-value) '%';
    position: absolute; right:0;
}





.pgrs::-webkit-progress-value
{
    /* Gradient background with Stripes */
    background-image:
        -webkit-linear-gradient( 135deg,
        transparent,
        transparent 33%,
        rgba(0,0,0,.1) 33%,
        rgba(0,0,0,.1) 66%,
        transparent 66%),
        -webkit-linear-gradient( top,
        rgba(255, 255, 255, .25),
        rgba(0,0,0,.2)),
        -webkit-linear-gradient( left, #09c, #f44);
} 

.pgrs::-moz-progress-bar
{
    /* Gradient background with Stripes */
    background-image:
        -moz-linear-gradient( 135deg,
        transparent,
        transparent 33%,
        rgba(0,0,0,.1) 33%,
        rgba(0,0,0,.1) 66%,
        transparent 66%),
        -moz-linear-gradient( top,
        rgba(255, 255, 255, .25),
        rgba(0,0,0,.2)),
        -moz-linear-gradient( left, #09c, #f44);
} 

.sss
{
    position: relative;
    float: left;
    margin-top: 1.4%;
}
.rows
{
    width: auto;;
}

.btPorgress
{
    position: relative;
    margin-top: 22px;
    //margin-left: 15px;
    float: right;
}

.pron-span
{
    margin-top: 19px;
    margin-left: -145px;
    position: relative;
} 

#rowAdder
{
    float: left;
    margin-top: 1%;
    margin-left: 3.5%;
    position: absolute;
    width: 10%;
} 

#imgAdder
{
    position: absolute;
    margin-top: 0.8%;
    width: 2%;
    height: 5%;
    margin-left: 14%;
}